{% extends 'index.html' %}
{% load custom_tags %}
{% block page-container %}
    <div class="article-detail">
        <h4>{{ article_obj.title }}</h4>
        <p>{{ article_obj.content | safe }}</p>

        <hr/>
{#        <h2>{{ article_obj.comment_set.select_related }}</h2>#}
        {% autoescape off %}
        {% build_comment_tree article_obj.comment_set.select_related %}
        {% endautoescape %}
    </div>
    <div class="comment-box">
        {% if request.user.is_authenticated %}
            <textarea class="form-control" rows="3"></textarea>
            <button type="button" style="margin-top: 10px" class="btn btn-success pull-right">评论</button>
        {% else %}
            <div class="jumbotron">
                <h4 class="text-center"><a class="btn-link" name="before_url" href="{% url 'login' %}?next={{ request.path }}">登录</a>后评论</h4>
            </div>
        {% endif %}
    </div>

{% endblock %}

{% block  bottom-js %}
<script>

    function getCsrf(){
        return $("input[name='csrfmiddlewaretoken']").val();
    }

    $(document).ready(function(){
        $(".comment-box button").click(function(){
            var comment_text = $(".comment-box textarea").val();
            if (comment_text.trim().length <5){
                alert("评论不能少于5个字sb");
            }else{
                //post
                var parent_comment_id = $(this).parent().prev().attr('comment-id');
                $.post("{% url 'post_comment' %}",
                        {
{#                            'comment_type':1,#}
                            article_id:"{{ article_obj.id }}",
                            parent_comment_id:parent_comment_id,
                            'comment':comment_text.trim(),
                            'csrfmiddlewaretoken':getCsrf()
                        },//end post args
                        function(callback){
                            //console.log(callback);
                            if (callback == 'post-comment-success'){
                                window.location.reload();
{#                                var new_comment_box_div = $(".new-comment-box").clone(true);#}
{#                                $(".comment-list").before(new_comment_box_div);#}
{#                                $(".new-comment-box textarea").val("");#}
                                //在刷新评论之前,把评论框再放回文章 底部
                            }
                })//end post
            }
        });//end button click
    });
</script>
{% endblock %}